<script lang="ts" setup>
import CardGlass from "@@/components/CardGlass/CardGlass.vue";
import Dialog from "@@/components/rework/Dialog/Dialog.vue";
import { formatNumber } from "@@/utils/tools/tools";
import { caches } from "@@/hooks/routeCache";
import router from "@@/router";
import { onBeforeRouteUpdate } from "vue-router";
import type { RouteLocationNormalized } from "vue-router";
import { DialogRouter } from "@@/router/interface";
import { useI18n } from "vue-i18n";
import { HomeData } from "@@/api/module/home";

const props = defineProps<{
  homeData: HomeData.Res | undefined;
}>();
const { t } = useI18n();
const DialogRef = ref<InstanceType<typeof Dialog>>();

/**打开对话框并跳转路由 */
async function openDialog(routeName?: string) {
  const res = await router.push({ name: routeName });
  if (res instanceof Error) return;
}
const dialog = reactive({
  footer: "",
});
// * 当路由更新时
onBeforeRouteUpdate((to: RouteLocationNormalized & DialogRouter) => {
  if (!DialogRef.value) return;
  //获取参数类型
  const param: Partial<Parameters<typeof DialogRef.value.open>> = [{}];
  const paramItem: NonNullable<typeof param[0]> = param[0]!;
  /**目标路由meta */
  const toMeta = to.meta;
  // *不是dialog路由
  if (!toMeta.dialog) return DialogRef.value.close();
  /**目标路由dialog参数 */
  const routeDialog: any = toMeta.dialog;
  paramItem.title = t(toMeta.title || "");
  paramItem.showBack = Boolean(routeDialog.showBack);
  if (routeDialog.okBtnText) paramItem.okBtnText = t(routeDialog.okBtnText);
  if (routeDialog.noBtnText) paramItem.noBtnText = t(routeDialog.noBtnText);
  dialog.footer = routeDialog.footer || "";
  DialogRef.value?.open(paramItem);
});
/**当Dialo关闭时 */
function onClose() {
  router.replace({ name: "home" });
}
/**当Dialo否定按钮点击时 */
function onNoBtn() {
  if (typeof pageRef.value?.onNoBtn === "function") pageRef.value?.onNoBtn();
}
/**当Dialo确定按钮点击时 */
function onOkBtn() {
  if (typeof pageRef.value?.onOkBtn === "function") pageRef.value?.onOkBtn();
}
/**当Dialo底部链接按钮点击时 */
function onFooterBtn() {
  if (typeof pageRef.value?.onFooterBtn === "function")
    pageRef.value?.onFooterBtn();
}
/**点击开启加速 */
async function onOpenSpeed() {
  // const res = await router.push({ name: "safeBox" });
  // if (res instanceof Error) return;
  router.push({ name: "topUpMoney" });
}
const pageRef = ref<any>();
</script>

<template>
  <CardGlass>
    <Dialog
      @no-btn="onNoBtn"
      @ok-btn="onOkBtn"
      @close="onClose"
      ref="DialogRef"
    >
      <!-- 路由渲染 -->
      <router-view v-slot="{ Component }">
        <Transition name="slide">
          <keep-alive :include="caches">
            <component
              :homeData="props.homeData"
              ref="pageRef"
              :is="Component"
            />
          </keep-alive>
        </Transition>
      </router-view>
      <template #footer_footer>
        <p
          @click="onFooterBtn"
          v-if="dialog.footer"
          class="footer_footer active"
        >
          {{ $t(dialog.footer) }}
        </p>
      </template>
    </Dialog>
    <div class="CardGlass_content">
      <p>{{ $t("hash-zong-liang") }}</p>
      <h4>{{ formatNumber(props.homeData?.total_solrs_number) }}</h4>
      <div class="flex-J-SE flex-A-C auto-ml">
        <div class="auto-mt">
          <p class="active color-box__1 color-box">
            <span> {{ $t("dang-qian-suan-li") }} </span>
            <span>{{ formatNumber(props.homeData?.loss) }}</span>
          </p>
          <p
            @click="openDialog('safeBox')"
            class="active color-box__1 color-box"
          >
            <span> {{ $t("bao-xian-xiang") }} </span>
            <span>{{ formatNumber(props.homeData?.vip) }}</span>
          </p>
        </div>
        <p
          v-if="props.homeData?.vip && props.homeData?.vip >= 100"
          class="color-round"
        >
          {{ $t("jia-su-zhong") }}...
        </p>
        <p @click="onOpenSpeed()" v-else class="active color-round">
          {{ $t("kai-qi-jia-su") }}
        </p>
        <div class="auto-mt">
          <p class="active color-box__2 color-box">
            <span> {{ $t("dang-ri-liu-shui") }} </span>
            <span>{{ formatNumber(props.homeData?.today) }}</span>
          </p>
          <p
            @click="$router.push({ name: 'dailyComputingPower' })"
            class="active color-box__2 color-box"
          >
            <span> {{ $t("dang-ri-suan-li") }} </span>
            <span>{{ formatNumber(props.homeData?.loss) }}</span>
          </p>
        </div>
      </div>
    </div>
  </CardGlass>
</template>

<style lang="less" scoped>
.CardGlass_content {
  text-align: center;
  .color-box__1 {
    min-height: 100rem;
    min-width: 160rem;
    background-color: var(--C-M1);
  }
  .color-box__2 {
    min-height: 100rem;
    min-width: 160rem;
    background-color: var(--C-M2);
  }
  .color-round {
    display: flex;
    justify-content: center;
    align-items: center;

    --size: 140rem;
    width: var(--size);
    height: var(--size);
    padding: var(--gap-sm);

    background-color: #fed731;
    border-radius: 100%;
    border: #000 solid 6rem;
  }
  .color-box {
    display: grid;
    align-items: center;
    padding: 0 var(--gap-sm);
    border-radius: 12rem;
    height: 90rem;
    span {
      display: block;
    }
  }
}
.footer_footer {
  text-align: right;
}
</style>
